<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item :to="{ path: '/' }">消费管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 搜索 -->
      <el-form ref="FormRef" :model="Form" label-width="120px">
        <el-row>
          <el-col :lg="8" :md="12" :sm="12" :xs="24">
            <el-form-item label="菜品类型" prop="models">
              <el-select
                v-model="Form.models"
                placeholder="请选择菜品类型"
                style="width: 100%;"
              >
                <el-option
                  v-for="(item, index) in CuisineModel"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="text-align: right;">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 表格 -->
      <el-table
        :data="FoodData"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        style="width: 100%;"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in tableColumn"
          :key="index"
          :prop="item.prop ? item.prop : undefined"
          :label="item.label"
          align="center"
          :width="item.width"
        >
          <template slot-scope="scope">
            <div v-if="item.type === 'role'">
              {{ scope.row[item.prop] | role }}
            </div>
            <div v-else-if="item.type === 'date'">
              {{ scope.row[item.prop] | timeFilter }}
            </div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button @click="reback(scope.row)"  type="primary" size="small"
              >已收到外卖</el-button
            >
            <el-button type="danger" size="small" @click="nrcy(scope.row)">未收到外卖</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </el-card>
    <!-- 弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="addFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="菜品类型" prop="models">
          <el-select
            v-model="addForm.models"
            placeholder="请选择菜品类型"
            style="width: 100%;"
          >
            <el-option
              v-for="(item, index) in CuisineModel"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出餐地址" prop="FoodAddress">
          <el-input v-model="addForm.FoodAddress"></el-input>
        </el-form-item>
        <el-form-item label="endTime" prop="endTime">
          <el-input v-model="addForm.endTime"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="addForm.price"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetClick">取 消</el-button>
        <el-button type="primary" @click="addClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
const tableColumn = [
  { label: '预约单号ID', prop: '_id', type: 'text' },
  { label: '菜品ID', prop: 'foodId', type: 'text' },
  { label: '菜品类型', prop: 'models', type: 'text' },
  { label: '出餐地址', prop: 'FoodAddress', type: 'text' },
   { label: '收货地址', prop: 'UserAddress', type: 'text' },
  { label: '套餐名称', prop: 'packageType', type: 'text' },
  { label: '套餐价格', prop: 'price', type: 'text' },
  { label: '预约时间', width: 200, prop: 'createTime', type: 'date' },
  { label: '终止送餐时间', prop: 'endTime', type: 'date' }
]
export default {
  data () {
    return {
      Form: {},
      FoodData: [],
      addForm: {},
      rules: {
        models: [
          { required: true, message: '请选择菜品类型', trigger: 'change' }
        ],
        Useraddress: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        endTime: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      currentPage: 5,
      total: 0,
      pageSize: 5,
      pageNum: 1,
      tableColumn,
      dialogVisible: false
    }
  },
  mounted () {
    this.getList()
    // 订单生成后为点击2个小时后自动执行收到外卖
    this.timer=setTimeOut(this.reback,1000*3600*2)
  },
  beforeDestroy() {
    // 清除定时器，防止内存泄露
    clearTimeout(this.timer)
  },
  computed: {
    ...mapState(['CuisineModel', 'userInfo'])
  },
  methods: {
    getList () {
      this.Form.pageSize = this.pageSize
      this.Form.pageNum = this.pageNum
      this.Form.number = this.userInfo.number
      this.Form.status = 1
      this.$api
        .get('/api/Food/list', { params: this.Form })
        .then(res => {
          this.FoodData = res.data.data.records
          this.total = res.data.data.total
        })
        .catch(err => {
          console.log(err)
          this.$message.error('获取列表失败')
        })
    },
    search () {
      this.pageNum = 1
      this.getList()
    },
    reset () {
      this.pageNum = 1
      this.Form = {}
      this.getList()
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.getList()
    },
    handleCurrentChange (pageNum) {
      this.pageNum = pageNum
      this.getList()
    },
    addDialog () {
      this.dialogVisible = true
    },
    handleClose () {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.resetClick()
        })
        .catch(_ => {})
    },
    addClick () {
      this.$api.post(`/api/Food/add`, this.addForm).then(res => {
        this.addForm = {}
        this.dialogVisible = false
        this.getList()
      })
    },
    resetClick () {
      this.$refs.addFormRef.resetFields()
      this.dialogVisible = false
    },
    // 已经收到外卖
    reback (row) {
    let opTime=new Date().getTime();
      this.$api
        .post(`/api/Food/edit/${row._id}`, {
          status: 2,
          opTime:opTime
        })
        .then(res => {
          this.$message.success('收到货成功')
          this.getList()
        }).catch(res=>{
          console.log(res)
          this.$message.error('失败了！')
        })
    },
    // 未收到外卖
     nrcy(row){
       this.$router.replace('/seller/contact')
     }
  }
}
</script>

<style></style>
